<template>
  <div>
    <div class="b-search">
      <div class="b-s-header">
        博客标题列表
      </div>
      <el-row :gutter="10">
        <el-col :span="5" class="lh30">
          <span class="fz14">排序方式:</span>
          <el-dropdown :disabled="searchBlogLoad || issueBlogSize === 0 || !searchBlogVisible" @command="switchBlogSortType">
            <span v-bind:style="{ color: themeColor }">
              {{ sortTitle }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="0">发布时间（正序）</el-dropdown-item>
              <el-dropdown-item :command="1">发布时间（倒叙）</el-dropdown-item>
              <el-dropdown-item :command="2">评论最多</el-dropdown-item>
              <el-dropdown-item :command="3">评论最少</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" class="lh30">
          <span class="fz14">检索标题</span>
          <el-autocomplete
            v-model="searchBlogForm.word"
            value-key="title"
            size="mini"
            clearable
            :maxlength="100"
            :disabled="searchBlogLoad || !searchBlogVisible"
            :trigger-on-focus="false"
            :fetch-suggestions="searchBlogHandle"
            @clear="resetBlogHandle"
            @select="switchBlogHandle"
            @blur="resetBlogHandle"
            placeholder="请输入博客标题"
            style="width: 70%;"
          ></el-autocomplete>
          <el-tooltip placement="bottom" effect="light">
            <div slot="content" class="fz13 lh20">
              输入待检索的博客标题内容后，可以进行如下操作
              <br>
              1、根据推荐列表选择一个查找的博客
              <br>
              2、不选择推荐列表中的任意一项内容，失去焦点
            </div>
            <i class="el-icon-warning warning-icon"></i>
          </el-tooltip>
        </el-col>
        <el-col :span="13" class="lh30">
          <transition name="el-zoom-in-top">
            <div v-show="switchBlogId !== ''">
              <span class="fz14">选中的博客:</span>
              <span class="fz14">{{ switchBlogTitle }}</span>
            </div>
          </transition>
        </el-col>
      </el-row>
      <transition name="el-zoom-in-top">
        <div v-show="searchBlogVisible">
          <span class="fz14 lh30">博客列表</span>
          <!-- 骨架加载 -->
          <el-skeleton :loading="searchBlogLoad" :rows="3" :throttle="200" animated>
            <template>
              <span v-for="blog in issueBlogList" :key="blog.blogId" class="b-s-b-item" :style="{'color': (blog.blogId === switchBlogId ? themeColor : 'black')}"
                 @click="switchBlogHandle(blog)">
                {{ blog.title }}({{blog.commentNum }})({{ blog.issueTime.substring(0, 16) }})
              </span>
              <span v-show="issueBlogSize === 0" class="empty-blog">{{ emptyIssueBlog }}</span>
            </template>
          </el-skeleton>
        </div>
      </transition>
      <!-- 按钮组 -->
      <div class="b-s-button">
        <el-pagination
          hide-on-single-page
          :current-page="searchBlogForm.page"
          :page-size="searchBlogForm.limit"
          :total="issueBlogSize"
          :disabled="searchBlogLoad || !searchBlogVisible"
          @current-change="blogListPageExchangeHandle"
          layout="total, pager, jumper">
        </el-pagination>
        <el-tooltip class="item" effect="light" content="上一页" placement="top">
          <el-button :disabled="searchBlogLoad || issueBlogSize === 0 || searchBlogForm.page <= 1"
                     size="mini" circle icon="el-icon-arrow-left" @click="blogPageChangeHandle(-1)" />
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="下一页" placement="top">
          <el-button :disabled="searchBlogLoad || issueBlogSize === 0 || searchBlogForm.page * searchBlogForm.limit >= issueBlogSize"
                     size="mini" circle icon="el-icon-arrow-right" @click="blogPageChangeHandle(1)"/>
        </el-tooltip>
        <el-tooltip class="item" effect="light" :content="searchBlogVisible ? '隐藏列表' : '显示列表'" placement="top">
          <el-button :disabled="searchBlogLoad || issueBlogSize === 0" size="mini" circle icon="el-icon-search"
                     @click="toggleSearchBlog" />
        </el-tooltip>
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider content-position="center">评论管理</el-divider>
    <!-- 博客评论管理块 -->
    <div class="comment-search">
      <transition name="el-zoom-in-top">
        <div v-show="searchBlogCommentVisible">
          <el-row class="filter-input">
            <el-col :span="6">
              <span class="fz14">评论内容</span>
              <el-input :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.word" clearable size="mini" maxlength="100"
                        @clear="clearFormInputHandle" placeholder="请输入评论内容" class="w75"></el-input>
            </el-col>
            <el-col :span="6">
              <span class="fz14">评论区块</span>
              <el-input :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.blockId" clearable size="mini" maxlength="100"
                        @clear="clearFormInputHandle" placeholder="请输入评论区块值" class="w75"></el-input>
            </el-col>
            <el-col :span="12">
              <el-button :disabled="searchBlogCommentLoad" size="mini" type="primary"
                         @click="searchBlogCommentListHandle" icon="el-icon-search">查询</el-button>
              <el-button :disabled="searchBlogCommentLoad" size="mini" type="info"
                         @click="resetBlogCommentListHandle" icon="el-icon-refresh-right">重置</el-button>
            </el-col>
          </el-row>
          <div class="filter-checkbox">
            <span class="fz14">过滤条件:</span>
            <el-checkbox :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.parentUserId"
                         true-label="0" false-label="" @change="changeCheckBoxHandle">一级评论</el-checkbox>
            <el-checkbox :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.authorLike"
                         true-label="0" false-label="" @change="changeCheckBoxHandle">作者点赞</el-checkbox>
            <el-checkbox :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.topFlag"
                         true-label="0" false-label="" @change="changeCheckBoxHandle">置顶</el-checkbox>
            <el-checkbox :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.hideFlag"
                         true-label="1" false-label="" @change="changeCheckBoxHandle">隐藏</el-checkbox>
            <el-checkbox :disabled="searchBlogCommentLoad" v-model="searchBlogCommentForm.deleteFlag"
                         true-label="1" false-label="" @change="changeCheckBoxHandle">删除</el-checkbox>
          </div>
        </div>
      </transition>
    </div>

    <!-- 表格工具 -->
    <div class="comment-button">
      <el-button :disabled="searchBlogCommentLoad" type="primary" size="mini" plain @click="openAddBlogCommentDialogHandle(undefined, undefined, undefined, undefined, true)"
                  icon="el-icon-plus">添加评论</el-button>
      <el-button :disabled="searchBlogCommentLoad || $refs.commentTable.selection.length === 0" type="success" size="mini" plain
                 @click="batchUpdateCommentHideFlagHandle(0)" icon="el-icon-open">显示评论</el-button>
      <el-button :disabled="searchBlogCommentLoad || $refs.commentTable.selection.length === 0" type="danger" size="mini" plain
                 @click="batchUpdateCommentHideFlagHandle(1)" icon="el-icon-turn-off">隐藏评论</el-button>
      <el-button :disabled="searchBlogCommentLoad || commentSize === 0" type="info" size="mini" plain
                 @click="openDownLoadBlogCommentDialogHandle" icon="el-icon-download">导出评论</el-button>
      <!-- 工具组件 -->
      <right-tool-bar :search-visible="searchBlogCommentVisible" :search-load="searchBlogCommentLoad"
                      @toggle-search="searchBlogCommentVisible = !searchBlogCommentVisible" @refresh-table="getBlogCommentList" />
    </div>
    <!-- 博客评论表格 -->
    <el-table
      v-loading="blogCommentLoad"
      :data="commentList"
      :default-sort = "{ prop: searchBlogCommentForm.field, order: searchBlogCommentForm.order }"
      @sort-change="commentTableSortExchangeHandle"
      ref="commentTable"
      class="commentTable"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="content" header-align="center" align="center" label="评论内容" min-width="300"></el-table-column>
      <el-table-column prop="blockId" header-align="center" align="center" label="评论区块" width="200"></el-table-column>
      <el-table-column prop="oneCommentFlag" header-align="center" align="center" label="类型" width="90">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.oneCommentFlag === '0' ? '顶级' : '回复' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="likeNum"  header-align="center" align="center" label="点赞数" width="90"></el-table-column>
      <el-table-column sortable prop="replyNum" header-align="center" align="center" label="回复数" width="90"></el-table-column>
      <el-table-column prop="authorLike" header-align="center" align="center" label="作者点赞" width="80">
        <template v-slot="scope">
          <el-tag v-if="scope.row.authorLike === 0" class="authorLike">
            点赞
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="topFlag" header-align="center" align="center" label="置顶" width="80">
        <template v-slot="scope">
          <el-tag v-if="scope.row.topFlag === 0" class="topFlag">
            置顶
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hideFlag" header-align="center" align="center" label="隐藏" width="80">
        <template v-slot="scope">
          <el-tag :type="scope.row.hideFlag === 0 ? 'info' : 'warning'">
            {{ scope.row.hideFlag === 0 ? '正常' : '隐藏' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deleteFlag" header-align="center" align="center" label="删除" width="80">
        <template v-slot="scope">
          <el-tag :type="scope.row.deleteFlag === 0 ? 'info' : 'danger'">
            {{ scope.row.deleteFlag === 0 ? '正常' : '删除' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="createTime" header-align="center" align="center" label="评论时间" width="100"></el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" label="备注" width="100"></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template v-slot="scope">
          <el-dropdown>
            <span class="el-dropdown-link fz13" v-bind:style="{ color: themeColor }">
              功能按钮<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="openCommentInfoDialogHandle(scope.row)">
                评论详细
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="openAddBlogCommentDialogHandle(scope.row.commentId, scope.row.blockId, scope.row.userId, scope.row.content, false)">
                回复
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.authorLike === 0 || scope.row.hideFlag === 1 || scope.row.deleteFlag === 1"
                                @click.native="updateCommentLikeHandle(scope.row.commentId, 0)">
                点赞
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.authorLike === 1 || scope.row.hideFlag === 1 || scope.row.deleteFlag === 1"
                                @click.native="updateCommentLikeHandle(scope.row.commentId, 1)">
                取消点赞
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.topFlag === 0 || scope.row.hideFlag === 1 || scope.row.deleteFlag === 1"
                                @click.native="updateCommentTopFlagHandle(scope.row.commentId, 0)">
                置顶
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.topFlag === 1 || scope.row.hideFlag === 1 || scope.row.deleteFlag === 1"
                                @click.native="updateCommentTopFlagHandle(scope.row.commentId, 1)">
                取消置顶
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.hideFlag === 1" @click.native="updateCommentHideFlagHandle(scope.row.commentId, 1)">
                隐藏
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.hideFlag === 0" @click.native="updateCommentHideFlagHandle(scope.row.commentId, 0)">
                取消隐藏
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格分页插件 -->
    <el-pagination
      :current-page="searchBlogCommentForm.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchBlogCommentForm.limit"
      :total="commentSize"
      :disabled="blogCommentLoad || commentSize === 0"
      @size-change="commentListSizeExchangeHandle"
      @current-change="commentListPageExchangeHandle"
      layout="total, sizes, prev, pager, next, jumper"
      class="paging">
    </el-pagination>

    <!-- 添加博客评论弹出框 -->
    <add-comment :dialog-visible="addBlogCommentDialog" ref="addComment" @close-comment-dialog="closeAddBlogCommentDialogHandle" />

    <!-- 博客评论详情弹出框 -->
    <comment-info :dialog-visible="commentInfoDialog" ref="commentInfo" @close-comment-dialog="closeCommentInfoDialogHandle" />

    <!-- 博客评论下载弹出框 -->
    <download-comment :dialog-visible="downLoadCommentDialog" ref="downloadComment" @close-comment-dialog="downLoadCommentDialog = !downLoadCommentDialog" />

  </div>
</template>

<script>
  import RightToolBar from '@/components/common/right-toolbar'
  import AddComment from "@/components/comment/add"
  import CommentInfo from "@/components/comment/detail"
  import DownloadComment from "@/components/comment/download";

  export default {
    layout: 'admin',
    name: "admin-comment-manage",
    components: { RightToolBar, AddComment, CommentInfo, DownloadComment },
    data() {
      return {
        /*
          博客标题列表
         */
        // 用户所有已发布博客列表
        issueBlogList: [],
        // 用户所有已发布博客大小
        issueBlogSize: 0,
        // 用户已发布博客个数为零时，页面显示内容
        emptyIssueBlog: undefined,
        // 缓存旧的’用户所有已发布博客列表'（用户输入博客标题信息时，缓存原来的博客列表）
        cacheIssueBlogList: undefined,
        // 缓存旧的’用户所有已发布博客列表大小'，缓存方式同cacheIssueBlogList
        cacheIssueBlogSize: undefined,
        // 选中的博客id
        switchBlogId: '',
        // 检索博客列表是否在加载[true-加载 false-不加载]
        searchBlogLoad: false,
        // 检索博客表单对象
        searchBlogForm: {
          // 检索的博客标题（模糊检索）
          word: '',
          // 检索结果排序方式[0-发布时间（正序） 1-发布时间（倒叙） 2-评论最多 3-评论最少]
          sortType: 0,
          // 博客列表分页页码
          page: 1,
          // 博客列表每页大小
          limit: 20,
        },
        // 是否显示博客标题列表[true-显示 false-不显示]
        searchBlogVisible: true,
        /*
          博客评论管理
         */
        // 博客评论列表
        commentList: [],
        // 博客评论总数
        commentSize: 0,
        // 博客评论表格被选中的‘行’数据
        commentTableSelected: [],
        // 评论表格类型[0-普通表格 1-树形表格]
        tableType: 0,
        // 博客评论列表是否在加载[true-加载 false-不加载]
        blogCommentLoad: false,
        // 博客评论检索表单是否显示[true-显示 false-不显示]
        searchBlogCommentVisible: true,
        // 博客评论检索表单对象
        searchBlogCommentForm: {
          blogId: '',
          // 检索的评论内容（模糊检索）
          word: '',
          // 评论区块id（全值匹配）
          blockId: '',
          // 是否查询一级评论[0-是]
          parentUserId: '',
          // 评论是否被删除[0-正常 1-删除]
          deleteFlag: '',
          // 评论是否被被隐藏[0-正常 1-隐藏]
          hideFlag: '',
          // 作者是否点赞[0-点赞 1-正常]
          authorLike: '',
          // 评论是否置顶[0-置顶 1-正常]
          topFlag: '',
          // 博客评论列表分页页码
          page: 1,
          // 博客评论列表每页大小
          limit: 10,
          // 排序字段
          field: 'createTime',
          // 排序方式
          order: 'ascending'
        },
        // 添加博客评论弹出框是否显示[true-显示 false-关闭]
        addBlogCommentDialog: false,
        // 博客评论详情弹出框是否显示[true-显示 false-关闭]
        commentInfoDialog: false,
        // 博客评论下载弹出框是否显示[true-显示 false-关闭]
        downLoadCommentDialog: false,
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
      // 博客列表排序类型-中文标题
      sortTitle() {
        let sortType = this.searchBlogForm.sortType
        let title;
        switch (sortType) {
          case 0:
            title = '发布时间（正序）'
            break
          case 1:
            title = '发布时间（倒叙）'
            break
          case 2:
            title = '评论最多'
            break
          case 3:
            title = '评论最少'
            break
          default:
            title = '未知'
            break
        }
        return title
      },
      // 选中的博客标题
      switchBlogTitle() {
        let title = '', switchBlogId = this.switchBlogId
        if (!!switchBlogId) {
          let issueBlogList = this.issueBlogList
          for (let i = 0; i < issueBlogList.length; i++) {
            if (issueBlogList[i].blogId === switchBlogId) {
              title = issueBlogList[i].title
              break
            }
          }
        }
        return title
      },
      // 博客评论列表是否正在加载中[true-加载 false-不加载]
      searchBlogCommentLoad() {
        return this.blogCommentLoad || !this.searchBlogCommentForm.blogId
      },
    },
    created() {

      if (process.client) {
        /*
          客户端渲染
         */
        // 博客列表加载
        this.getBlogList(true, undefined)

      }
    },
    methods: {
      /*
        博客标题列表方法
       */
      /**
       * 博客列表’排序类型‘下拉菜单选择事件
       * @param command 最新博客列表排序类型
       */
      switchBlogSortType(command) {
        console.log('command', command, typeof  command)
        // 切换博客列表排序类型
        let searchBlogForm = this.searchBlogForm
        searchBlogForm.sortType = command
        // 重置博客列表页码
        searchBlogForm.page = 1

        this.getBlogList(false, undefined)
      },
      /**
       * 检索博客列表事件
       * @param queryString 检索内容
       * @param cb          回调对象
       */
      searchBlogHandle(queryString, cb) {
        console.log('检索内容:[' + queryString + "]")
        // 列表检索
        this.getBlogList(false, cb)
        // // 回显推荐的博客列表
        // cb(this.issueBlogList)
      },
      /**
       * 发送请求至服务端，获取博客列表内容
       * @param {boolean} bool 博客列表加载类型[true-页面加载 false-手动检索]
       * @param {function} callback 回调函数
       */
      getBlogList(bool, callback) {
        // 博客列表加载
        this.searchBlogLoad = true;
        this.$axios.$post('sys/blog-issue/title/list', this.searchBlogForm)
          .then(({ data:page }) => {
            this.issueBlogList = page.list
            this.issueBlogSize = page.totalNum
            if (page.totalNum === 0) {
              this.emptyIssueBlog = bool ? '您的已发布博客为空，请多多发表博客哦，这里才能有内容。' : '没有找到符合您检索标题的博客'
            }
          })
          .catch(() => {})
          .finally(() => {
            if (!!callback) {
              callback(this.issueBlogList)
            }
            // 博客列表加载结束
            this.searchBlogLoad = false
          })
      },
      /**
       * 清空博客标题检索内容时，恢复已有的博客列表
       */
      resetBlogHandle() {
        console.log('准备重置列表')
        if (!this.searchBlogForm.word) {
          this.getBlogList(true, undefined)
        }
      },
      /**
       * 切换显示的博客评论列表事件
       * @param {Object} blog 博客id
       */
      switchBlogHandle(blog) {
        if (this.switchBlogId === blog.blogId) {
          return;
        }
        // 记录用户点击的博客
        this.switchBlogId = blog.blogId
        this.searchBlogCommentForm.blogId = blog.blogId
        // 获取博客id关联的博客标签列表
        this.getBlogCommentList()
      },
      /**
       * 博客标题列表页码变化事件
       * @param num 变化值（num为1时，页码数加一。num为-1时，页码数减一）
       */
      blogPageChangeHandle(num) {
        // 提前使按钮置灰，防抖
        this.searchBlogLoad = true
        // 页码变化
        this.searchBlogForm.page += num

        this.getBlogList(false, undefined)
      },
      /**
       * 博客标题列表页码切换事件
       * @param page 最新页码
       */
      blogListPageExchangeHandle(page) {
        let searchBlogForm = this.searchBlogForm
        if (searchBlogForm.page === page) {
          return
        }
        searchBlogForm.page = page

        this.getBlogList(false, undefined)
      },
      /**
       * 切换博客列表显示状态
       */
      toggleSearchBlog() {
        if (!this.switchBlogId) {
          this.notify('info', '温馨提示', '请选中要查看的博客，然后再隐藏列表哦')
          return
        }
        this.searchBlogVisible = !this.searchBlogVisible
      },
      /*
        博客评论方法
       */
      /**
       * 博客评论’过滤复选框‘选择事件
       */
      changeCheckBoxHandle() {
        // 重置分页页码
        this.searchBlogCommentForm.page = 1

        this.getBlogCommentList()
      },
      /**
       * 检索博客评论列表事件
       */
      searchBlogCommentListHandle() {
        let searchBlogCommentForm = this.searchBlogCommentForm
        if (searchBlogCommentForm.word === '' && searchBlogCommentForm.blockId === ''
          && searchBlogCommentForm.parentUserId === '' && searchBlogCommentForm.authorLike === ''
          && searchBlogCommentForm.topFlag === '' && searchBlogCommentForm.hideFlag === ''
          && searchBlogCommentForm.deleteFlag === '' && searchBlogCommentForm.page === 1
          && searchBlogCommentForm.limit === 10) {
          this.notify('info', "温馨提示", '所有查询条件为空')
          return
        }
        // 重置分页页码
        searchBlogCommentForm.page = 1
        // 调用方法，获取博客评论列表
        this.getBlogCommentList()
      },
      /**
       * 获取博客评论列表方法
       */
      getBlogCommentList() {
        // console.log('我是对象: ', this.searchBlogCommentForm)
        // 博客评论列表加载
        this.blogCommentLoad = true
        this.$axios.$post('/comment/manage/list', this.searchBlogCommentForm)
          .then(({ data:page }) => {
            this.commentList = page.list
            this.commentSize = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 博客评论列表加载结束
            this.blogCommentLoad = false
          })
      },
      /**
       * 清空博客评论表单容输入框内容事件
       */
      clearFormInputHandle() {
        // 重置分页页码
        this.searchBlogCommentForm.page = 1
        // 调用方法，获取博客评论列表
        this.getBlogCommentList()
      },
      /**
       * 重置博客评论检索表单事件
       */
      resetBlogCommentListHandle() {
        let searchBlogCommentForm = this.searchBlogCommentForm
        if (searchBlogCommentForm.word === '' && searchBlogCommentForm.blockId === ''
          && searchBlogCommentForm.parentUserId === '' && searchBlogCommentForm.authorLike === ''
          && searchBlogCommentForm.topFlag === '' && searchBlogCommentForm.hideFlag === ''
          && searchBlogCommentForm.deleteFlag === '' && searchBlogCommentForm.page === 1
          && searchBlogCommentForm.limit === 10) {
          this.notify('info', "温馨提示", '所有查询条件为空')
          return
        }
        // 重置博客评论检索表单
        searchBlogCommentForm.word = ''
        searchBlogCommentForm.blockId = ''
        searchBlogCommentForm.parentUserId = ''
        searchBlogCommentForm.authorLike = ''
        searchBlogCommentForm.topFlag = ''
        searchBlogCommentForm.hideFlag = ''
        searchBlogCommentForm.deleteFlag = ''
        searchBlogCommentForm.page = 1
        searchBlogCommentForm.limit = 10
        searchBlogCommentForm.field = 'createTime'
        searchBlogCommentForm.order = 'ascending'

        // 调用方法，获取博客评论列表
        this.getBlogCommentList()
      },
      /**
       * 打开添加博客评论弹出框事件
       * @param {string} parentCommentId 被回复评论id
       * @param {string} blockId         评论区块id
       * @param {string} parentUserId    被回复的用户id
       * @param {string} replyContent    被回复的评论内容
       * @param {boolean} type           操作类型[true-添加 false-回复]
       */
      openAddBlogCommentDialogHandle(parentCommentId, blockId, parentUserId, replyContent, type) {
        // 打开添加博客评论弹出框
        this.addBlogCommentDialog = true

        this.$nextTick(() => {
          // 初始化弹出框
          this.$refs.addComment.initCommentDialog(parentCommentId, this.switchBlogId, blockId, parentUserId, replyContent, type)
        })
      },
      /**
       * 关闭添加博客评论弹出框事件
       * @param bool 是否刷新博客评论列表[true-刷新 false-不刷新]
       */
      closeAddBlogCommentDialogHandle(bool) {
        // 关闭弹出框
        this.addBlogCommentDialog = false

        if (bool) {
          // 刷新表格数据
          this.getBlogCommentList()
        }
      },
      /**
       * 更新博客评论的‘点赞状态’属性值
       * @param {string} commentId  评论主键
       * @param {number} type       操作类型[0-点赞 1-取消点赞]
       */
      updateCommentLikeHandle(commentId, type) {
        // 博客评论列表加载
        this.blogCommentLoad = true
        let comment = {
          blogId: this.switchBlogId,
          commentId,
          type
        }
        this.$axios.$post('/comment/manage/update/like', comment)
          .then(() => {
            this.notify('success', '提示', type === 0 ? '点赞博客评论成功' : '取消点赞博客评论成功')
            // 刷新博客评论表格
            this.getBlogCommentList()
          })
          .catch(() => {})
          .finally(() => {
            // 博客评论列表加载结束
            this.blogCommentLoad = false
          })
      },
      /**
       * 更新博客评论的’置顶状态‘属性值
       * @param {string} commentId 评论主键
       * @param {number} topFlag   ’是否置顶‘最新属性值[0-置顶 1-正常]
       */
      updateCommentTopFlagHandle(commentId, topFlag) {
        // 博客评论列表加载
        this.blogCommentLoad = true
        let comment = {
          commentId,
          topFlag
        }
        this.$axios.$post('/comment/manage/update/topFlag', comment)
          .then(() => {
            this.notify('success', '提示', topFlag === 0 ? '置顶博客评论成功' : '取消置顶赞博客评论成功')
            // 刷新博客评论表格
            this.getBlogCommentList()
          })
          .catch(() => {})
          .finally(() => {
            // 博客评论列表加载结束
            this.blogCommentLoad = false
          })
      },
      /**
       * 更新博客评论的’隐藏状态‘属性值
       * @param commentId 评论主键
       * @param hideFlag  ’是否隐藏‘最新属性值[0-正常 1-隐藏]
       */
      updateCommentHideFlagHandle(commentId, hideFlag) {
        // 博客评论列表加载
        this.blogCommentLoad = true
        let comment = {
          commentId,
          hideFlag
        }
        this.$axios.$post('/comment/manage/update/hideFlag', comment)
          .then(() => {
            this.notify('success', '提示', hideFlag === 0 ? '隐藏博客评论成功' : '取消隐藏博客评论成功')
            // 刷新博客评论表格
            this.getBlogCommentList()
          })
          .catch(() => {})
          .finally(() => {
            // 博客评论列表加载结束
            this.blogCommentLoad = false
          })
      },
      /**
       * 博客作者批量变更博客评论的’隐藏‘状态属性事件
       * @param {number} hideFlag 博客评论最新隐藏状态[0-正常 1-隐藏]
       */
      batchUpdateCommentHideFlagHandle(hideFlag) {
        // 博客评论列表加载
        this.blogCommentLoad = true
        // 计算获取博客评论最新隐藏状态的对立状态
        let hide = hideFlag ^ 0
        hide = hide ^ 1
        // 获取博客评论表格所有选中的行
        let commentList = this.$refs.commentTable.selection
        // 过滤掉’最新评论隐藏状态‘对立状态的数据
        commentList = commentList.filter(comment => comment.hideFlag === hide)
        if (commentList.length === 0) {
          this.notify('info', '温馨提示', `您选中的所有数据行均为${ hideFlag === 0 ? '非': ''}’隐藏‘状态，无需变更，请确认。`);
          // 博客评论列表加载结束
          this.blogCommentLoad = false
          return
        }
        let comment = {
          // 收集所有评论主键
          commentIds: JSON.stringify(commentList.map(comment => comment.commentId)),
          // 评论状态为隐藏
          hideFlag: hideFlag
        }
        this.$axios.$post('/comment/manage/batchUpdate/hideFlag', comment)
          .then(() => {
            this.notify('success', '提示', hideFlag === 0 ? '批量取消隐藏博客评论操作成功' : '批量隐藏博客评论操作成功')
            // 刷新博客评论表格
            this.getBlogCommentList()
          })
          .catch(() => {})
          .finally(() => {
            // 博客评论列表加载结束
            this.blogCommentLoad = false
          })
      },
      /**
       * 博客评论列表排序方式切换事件
       * @param {string} prop  排序字段
       * @param {string} order 排序方式
       */
      commentTableSortExchangeHandle({ prop, order } ) {
        let searchBlogCommentForm = this.searchBlogCommentForm
        if (!order) {
          // 第三次点击同一个排序字段，恢复默认排序
          searchBlogCommentForm.field = 'createTime'
          searchBlogCommentForm.order = 'ascending'
        } else {
          searchBlogCommentForm.field = prop
          searchBlogCommentForm.order = order
        }
        this.getBlogCommentList()
      },
      /**
       * 博客评论表格每页显示大小切换事件
       * @param {number} size 每页个数最新值
       */
      commentListSizeExchangeHandle(size) {
        let searchBlogCommentForm = this.searchBlogCommentForm
        searchBlogCommentForm.page = 1
        searchBlogCommentForm.limit = size;

        this.getBlogCommentList()
      },
      /**
       * 博客评论表格页码切换事件
       * @param {number} page 最新页码
       */
      commentListPageExchangeHandle(page) {
        let searchBlogCommentForm = this.searchBlogCommentForm
        if (searchBlogCommentForm.page === page) {
          return
        }
        // 页码切换
        searchBlogCommentForm.page = page

        this.getBlogCommentList()
      },
      /**
       * 打开博客评论详细信息弹出框
       * @param {Object} comment 博客评论信息对象
       */
      openCommentInfoDialogHandle(comment) {
        // 打开弹出框
        this.commentInfoDialog = true

        this.$nextTick(() => {
          // 初始化博客评论详细信息弹出框
          this.$refs.commentInfo.initCommentInfoDialog(this.switchBlogId, comment)
        })
      },
      /**
       *
       * @param bool
       */
      closeCommentInfoDialogHandle(bool) {
        // 关闭弹出框
        this.commentInfoDialog = false

        if (bool) {
          // 刷新表格数据
          this.getBlogCommentList()
        }
      },
      /**
       * 打开博客评论下载弹出框
       */
      openDownLoadBlogCommentDialogHandle() {
        // 打开弹出框
        this.downLoadCommentDialog = true

        this.$nextTick(() => {
          // 初始化博客评论导出弹出框
          this.$refs.downloadComment.initDownloadCommentDialog(this.searchBlogCommentForm, this.commentSize)
        })
      }

    }
  }
</script>

<!--
  css字符对应
  b -> blog
  c -> comment
-->
<!-- 博客评论管理-左侧样式 -->
<style scoped>
  .b-search .b-s-header {
    margin-bottom: 10px;
    font-weight: bold;
  }
  .b-search .b-s-b-item {
    font-size: 14px;
    padding: 7px 10px;
    line-height: 30px;
    cursor: pointer;
  }
  .b-search .b-s-b-item:hover {
    background-color: rgba(3, 33, 30, 0.1);
    border-radius: 5px;
  }
  .b-search .b-s-button {
    margin-left: 10px;
    margin-top: 10px;
    display: inline-flex;
  }
</style>

<style scoped>
  .comment-search .filter-input {
    margin-bottom: 10px;
  }
  .comment-search .filter-checkbox {
    margin-bottom: 15px;
  }
  .comment-button {
    margin-bottom: 5px;
  }
</style>

<style scoped>
  .lh30 {
    line-height: 30px;
  }
  .lh20 {
    line-height: 20px;
  }
  .w75 {
    width: 75%;
  }
  .paging {
    float: right;
    margin: 7px;
  }
  .warning-icon {
    font-size: 20px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
  .empty-blog {
    margin-left: 10px;
    font-size: 14px;
    color: #e6a23c;
  }
</style>

<style scoped>
  .commentTable .authorLike {
    color: #E74B33;
    background-color: #fdedeb;
    border-color: #fadbd6;
  }
  .commentTable .topFlag {
    color: rgb(68, 166, 227);
    background-color: #ecf6fc;
    border-color: #daedf9;
  }
</style>
